<template>
	<view>
		<uni-nav-bar :fixed="true" left-icon="back" title="添加新卡" @clickLeft="leftBack" background-color="#318cff" color="#fff"></uni-nav-bar>
		<view class="dfj-pd-lr-20">
			<view class="dfj-t-666 dfj-pd-tb-20">请绑定持卡人本人银行卡</view>
			<view class="dfj-bg-white">
				<view class="dfj-flex dfj-flex-ai-c dfj-pd-lr-20 dfj-t-666">
					<view class="dfj-flex-1">持卡人</view>
					<view class="dfj-flex-3 dfj-pd-tb-30">{{ userInfo.userXm }}</view>
				</view>
				<view class="dfj-flex dfj-flex-ai-c dfj-pd-lr-20 dfj-t-666">
					<view class="dfj-flex-1">卡号</view>
					<view class="dfj-flex-3"><input class="dfj-pd-tb-30 dfj-f-26" v-model="bankNo" style="width: 100%;" type="number" placeholder="银行卡号"/></view>
				</view>
				<view class="dfj-flex dfj-flex-ai-c dfj-pd-lr-20 dfj-t-666">
					<view class="dfj-flex-1 dfj-pd-tb-30">类型</view>
					<view class="dfj-flex-3 dfj-pd-tb-30">
						<picker mode="selector" @change="bindPickerChange" :value="index" :range="array" range-key="bankName">
						    <view class="uni-input" v-if="array.length > 0">{{ array[index] && array[index].bankName || '请选择' }}</view>
						</picker>
					</view>
				</view>
			</view>
			
			
			<view class="dfj-pd-tb-50">
				<button type="primary" style="width: 100%;border-radius: 20rpx;" @click="saveBank()">保 存</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				array: [],
				index: -1,
				bankNo: '',
				userInfo: '',
			}
		},
		onLoad() {
			this.getBankList()
		},
		onShow() {
			this.userInfo = JSON.parse(localStorage.getItem('loginInfo')).userInfo;
		},
		methods: {
			leftBack() {
				uni.navigateBack();
			},
			getBankList() {
				this.$http({
					url: '/userOpt/queryBankInfoList'
				}).then(res=>{
					this.array = res.data;
				})
			},
			bindPickerChange(e){
				this.index = e.detail.value
			},
			saveBank() {
				this.$http({
					url: '/userOpt/optUserBankInfo',
					data: {
						bankName: this.array[this.index].bankName, //银行名称
						bankCardNo: this.bankNo, //银行卡号
						userNo: this.userInfo.userNo, //身份证
						userXm: this.userInfo.userXm, //真实姓名
					}
				}).then(res=>{
					console.log(res)
					if(res.flag){
						uni.navigateBack()
						this.getUser()
					}
				})
			},
			getUser() {
				this.$http({
					url: '/userOpt/userCenter'
				}).then(res => {
					localStorage.setItem('loginInfo',JSON.stringify(res.data))
				})
			},
		}
	}
</script>

<style>
</style>
